<template>
    <p ref="hello">{{ user.name }}</p>
    <button @click="change">修改user.name</button>
    <hr>

    <p>{{ count }}</p>
    <button @click="modify">修改count</button>
    <hr>

    <p>{{ user.age }}</p>
    <p>{{ ageRef }}</p>
    <button @click="ageRef++">修改ageRef</button>
    <hr>

    <p>{{ douleCount }}</p>
</template>

<script setup>
import { reactive, ref, toRef, watch } from 'vue'
import { computed, onMounted } from 'vue'

// 普通对象，不具有响应式
// const user = {
//     name: 'tom',
//     age: 18
// }

/**
 * 用户业务逻辑
 */
// 创建响应式对象，是一个代理对象
const user = reactive({
    name: 'tom',
    age: 18
})

const change = function (){
    // console.log(this) // undefined

    user.name = 'alice'
    console.log(user.name)
}

/**
 * 业务逻辑
 */
// 创建响应式对象，{value: 1}
let count = ref(1)

const modify = function(){
    count.value++
    console.log(count.value)
}

const ageRef = toRef(user, 'age')

/**
 * 定义计算属性
 */
const douleCount = computed(() =>{
    return count.value * 2
})


/**
 * 监视器
 */
watch(count, (newValue, oldValue) => {
    console.log('count被修改了----', oldValue,  newValue)
})


console.log('created.........')

const hello = ref(null)

onMounted(() => {
    console.log('mounted.........')

    // console.log(this.$refs.hello)
    console.log(hello.value)
})

</script>

<style>

</style>